All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

Fix Summary

What changes do you think we should make in order to solve the problem?

We should make newline addition conditional on the isMultiline parameter throughout the library. The following changes are needed:

1. Fix BR element addition in addTextToElement() function (parserUtils.ts)

Current problematic code:

if (index < lines.length - 1 || (index === 0 && line === '')) {
  addBrElement(node);
}

Why change is needed: This code always adds BR elements (containing \n characters) regardless of whether the input should be single-line or multiline. For
single-line inputs, these BR elements create unwanted newlines that get converted to spaces.

Required change:

// Only add BR elements for multiline inputs or when there are actual line breaks
if (isMultiline && (index < lines.length - 1 || (index === 0 && line === ''))) {
  addBrElement(node);
}

2. Pass isMultiline parameter to addTextToElement() calls (parserUtils.ts)

Current problematic code:

// Line 232
addTextToElement(currentParentNode, line.text);

// Line 258
addTextToElement(currentParentNode, textBeforeRange);

// Line 288
addTextToElement(currentParentNode, textAfterRange);

Why change is needed: These function calls don't pass the isMultiline parameter, causing them to default to true and always add BR elements even for single-line
inputs.

Required changes:

// Line 232
addTextToElement(currentParentNode, line.text, isMultiline);

// Line 258
addTextToElement(currentParentNode, textBeforeRange, isMultiline);

// Line 288
addTextToElement(currentParentNode, textAfterRange, isMultiline);

3. Add isMultiline parameter to parseInnerHTMLToText() function (inputUtils.ts)

Current function signature:

function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition: number, inputType?: string): string

Why change is needed: The function doesn't know whether the input should be single-line or multiline when extracting text from DOM, so it always assumes multiline
behavior.

Required change:

function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition: number, inputType?: string, isMultiline = true): string

4. Fix newline addition in top-level component processing (inputUtils.ts)

Current problematic code:

if (shouldAddNewline && !containsEmptyBlockElement) {
  text += '\n';
  shouldAddNewline = false;
}
shouldAddNewline = true;

Why change is needed: This code always adds newlines between top-level components, even for single-line inputs where newlines should not be added.

Required change:

// Only add newlines for multiline inputs
if (isMultiline && shouldAddNewline && !containsEmptyBlockElement) {
  text += '\n';
  shouldAddNewline = false;
}
shouldAddNewline = isMultiline;

5. Fix BR element parsing (inputUtils.ts)

Current problematic code:

if (parentNode && parentNode.parentElement?.contentEditable !== 'true' && !!node.getAttribute('data-id')) {
  // Parse br elements into newlines only if their parent is not a child of the MarkdownTextInputElement
  text += '\n';
}

Why change is needed: This code converts BR elements to newlines regardless of whether the input should be single-line, causing unwanted newlines in the extracted
text.

Required change:

if (isMultiline && parentNode && parentNode.parentElement?.contentEditable !== 'true' && !!node.getAttribute('data-id')) {
  // Parse br elements into newlines only if their parent is not a child of the MarkdownTextInputElement - and now only for multiline inputs
  text += '\n';
}

6. Pass multiline prop to parseInnerHTMLToText() (MarkdownTextInput.web.tsx)

Current problematic code:

let parsedText = normalizeValue(
  inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, contentSelection.current.start, inputType),
);

Why change is needed: The function call doesn't pass the multiline prop, so parseInnerHTMLToText() defaults to multiline behavior even for single-line inputs.

Required change:

let parsedText = normalizeValue(
  inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement, contentSelection.current.start, inputType,
multiline),
);

cc @jmusial Will you take a look?

Seems to me that minimal fix requires only 3, 4 and 6.

2 seems reasonable addition. Would you mind adding test cases for that as well ?

Also please add before & after videos showcasing the changes and test the solution with E/App

Hello @jmusial

Before:
After: https://www.loom.com/share/18e42c66bfbd4bd39f16237c039671c1

Since the before is similar to Expensify/App#64831 issue screenshot, I just referenced it.

Seems to me that minimal fix requires only 3, 4 and 6.

2 seems reasonable addition. Would you mind adding test cases for that as well ?

Also please add before & after videos showcasing the changes and test the solution with E/App

Seems to me that minimal fix requires only 3, 4 and 6.

2 seems reasonable addition. Would you mind adding test cases for that as well ?

Also please add before & after videos showcasing the changes and test the solution with E/App

Thank you for the feedback! You're absolutely right that changes 3, 4, and 6 form the core of the fix. However, I'd like to respectfully suggest that change 1 is also critical for a complete solution.

Why Change 1 (BR element fix) is necessary:

The issue occurs in two places where newlines are introduced:

1. DOM generation (addTextToElement - change 1)
2. Text extraction (parseInnerHTMLToText - changes 3,4,6)

Without change 1, single-line inputs will still have BR elements inserted into the DOM, which can cause issues in other scenarios beyond just the text extraction phase.

Also Here comprehensive test cases covering:

1. Single-line text replacement test:
   it('should not add unwanted spaces when replacing selected text in single-line input', () => {
   // Test multiline={false} with text selection and replacement
   });
2. Multiline preservation test:
   it('should preserve line breaks in multiline inputs', () => {
   // Test multiline={true} continues to work correctly
   });
3. BR element generation test:
   it('should not generate BR elements for single-line inputs', () => {
   // Test DOM structure doesn't include unnecessary BR elements
   });
4. Text extraction test:
   it('should extract clean text from single-line inputs without newlines', () => {
   // Test parseInnerHTMLToText with isMultiline=false
   });

Also Here comprehensive test cases covering:

1. Single-line text replacement test:
   it('should not add unwanted spaces when replacing selected text in single-line input', () => {
   // Test multiline={false} with text selection and replacement
   });
2. Multiline preservation test:
   it('should preserve line breaks in multiline inputs', () => {
   // Test multiline={true} continues to work correctly
   });
3. BR element generation test:
   it('should not generate BR elements for single-line inputs', () => {
   // Test DOM structure doesn't include unnecessary BR elements
   });
4. Text extraction test:
   it('should extract clean text from single-line inputs without newlines', () => {
   // Test parseInnerHTMLToText with isMultiline=false
   });

yup, test scenarios look good, please implement

@TaduJR I think you need to still sign the CLA

I have read the CLA Document and I hereby sign the CLA

Just signed it @jmusial

@TaduJR I can't merge the PR because of the following error:

Please sign your commits retroactively (or submit another PR if that's easier).

Hello @tomekzaw

Here is the fully signed PR #718